import React, { useState, useEffect } from 'react'
import { backgroundObj, navigateTo, goBack } from '@/utils/utils'
import { View, Swiper, SwiperItem, Button, Input } from '@tarojs/components';
import { fetchUserHelpQa } from '@/server/shop'
import Tabbar from '@/components/Tabbar'
import Tabs from '@/components/Tabs'
import { getCurrentInstance, useReachBottom, usePullDownRefresh } from '@tarojs/taro'
import Image from '@/components/FormCondition/Image'
import FixedBtn from "@/components/FormCondition/FixedBtn";
import Taro from '@tarojs/taro';
import Router from '@/utils/router'
import './index.scss'
let MutualTimeout = null
const MutualList = (props) => {
    const [list, setList] = useState([])
    const [page, setPage] = useState({
        page: 1,
        limit: 20,
        value: '',
        searchType: 'all'
    })
    const { value } = page
    const fetchData = () => {
        fetchUserHelpQa({ ...page, keyword: value }).then(val => {
            const { postList } = val
            setList([...list, ...postList])
        }).finally(() => {
            Taro.stopPullDownRefresh();
        });
    }

    useEffect(() => {
        fetchData()
    }, [page])
    usePullDownRefresh(() => {
        setPage(() => {
            setList([])
            return {
                ...page,
                page: 1,

            }
        })
    })
    useReachBottom(() => {
        setPage({
            ...page,
            page: page.page + 1
        })
    })
    return <View className='MutualList_box'>
        <View className='MutualList_top_bg'></View>
        <Tabbar background={'transparent'} renderCenter={
            <View className='MutualList_top_back'>

                <View className='MutualList_top_icon'>
                    <View onClick={() => { goBack() }} className='MutualList_top_backInfo'></View>
                </View>
                <View className={`SeachInput_box`}>
                    <View className='SeachInput_box_icon'></View>
                    <Input placeholder={'请输入关键字'} placeholderClass='SeachInput_placeholder' className='SeachInput_box_input' onInput={(e) => {
                        if (MutualTimeout) {
                            clearTimeout(MutualTimeout)
                        }
                        MutualTimeout = setTimeout(() => {
                            setPage(() => {
                                setList([])
                                return {
                                    ...page,
                                    page: 1,
                                    value: e.target.value
                                }
                            })
                        }, 300)

                    }}></Input>
                </View>
            </View>
        }></Tabbar>
        {/* <View className='MutualList_select_box'>
            <View className='MutualList_select_left'>
                <Tabs onChange={(e) => {
                    setActive(e)
                }} active={active} list={list}></Tabs>
            </View>
            <View className='MutualList_select_right'>
                <View className='MutualList_select_icon MutualList_select_icon1'>
                    <View className='MutualList_select_icon1Count'>10</View>
                </View>
                <View className='MutualList_select_icon MutualList_select_icon2'></View>
            </View>
        </View> */}
        <View className='MutualList_logo_box'>
            <View className='MutualList_logo_left'></View>
            <View className='MutualList_logo_right'>
                <View className='MutualList_logo_fontBox'>
                    我是宏小图~

                </View>
                <View className='MutualList_logo_fontBox'>
                    谢谢你的智慧结晶，击破每个疑问难题
                </View>
                <View className='MutualList_logo_rightBox'></View>
            </View>
        </View>
        {list.length > 0 ?
            <View className='MutualList_MutualComponents_box'>
                {list.map(item => {
                    const { content, viewAmount, answerAmount, id } = item
                    const { images, text } = JSON.parse(content)
                    const imageList = images.split(',').filter(val => {
                        return val
                    })
                    return <View onClick={() => {
                        Router('MutualDetail', {
                            args: {
                                id,
                            }
                        })
                    }} className='MutualComponents_box'>
                        <View className='MutualComponents_title_box'>
                            {text}
                        </View>
                        <View className="Collect_list_showImage">
                            {imageList.map(val => {
                                return <View className="Collect_list_image">
                                    <Image src={val}></Image>
                                </View>
                            })}
                        </View>
                        <View className='MutualComponents_bottom'>
                            <View className='MutualComponents_bottom_left'>
                                <View>{answerAmount} 回答</View>
                                <View className='MutualComponents_bottom_radio'></View>
                                <View>{viewAmount} 浏览</View>
                            </View>
                            <View className='MutualComponents_bottom_right'>
                                写回答
                            </View>
                        </View>
                    </View>
                })}

            </View> : <View className='MutualList_empty_box'>
                <View className='MutualList_empty_height'></View>
                <View className='MutualList_empty_icon'></View>

            </View>}

        <View onClick={() => { Router('MutualQuestion') }} className='MutualList_empty_btn'>我要提问</View>
    </View>

}
export default MutualList